<template>
  <nuxt-layout name="navigation">
    <el-card class="container mg-t-20 border-radius">
      <template #header>
        <span class="fs-14">推荐网站</span>
      </template>
      <el-row class="push-form">
        <el-col :span="24">
          <el-form :model="pushForm" ref="pushFormRef" :rules="pushFormRules" label-width="80px">
            <el-form-item label="站长说明">
              欢迎提交优质资源
            </el-form-item>
            <el-form-item label="网站图标" prop="siteIcon">
              <Upload ref="uploadRef" :limit="1" :fileSize="1" list-type="picture" :accept="['image/jpeg', 'image/png']"
                      @uploadSuccess="uploadSuccess"/>
            </el-form-item>
            <el-form-item label="网站分类" prop="classifyId">
              <el-select v-model="pushForm.classifyId" placeholder="请选择分类">
                <el-option
                    v-for="item in classifyData"
                    :key="item.id"
                    :label="item.classifyName"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="网站标题" prop="siteName">
              <el-input type="text" placeholder="请输入网站标题" v-model="pushForm.siteName"/>
            </el-form-item>
            <el-form-item label="网站地址" prop="siteUrl">
              <el-input type="text" placeholder="请输入网站地址" v-model="pushForm.siteUrl"/>
            </el-form-item>
            <el-form-item label="网站标签" prop="tagList">
              <TagSelectTag ref="selectTagRef" :multiple-limit="5" @selectChange="selectChange"/>
            </el-form-item>
            <el-form-item label="网站详情" prop="siteDetails">
              <el-input type="textarea" maxlength="100" minlength="2" show-word-limit placeholder="请输入网站详情"
                        :rows="5" v-model="pushForm.siteDetails"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" :loading="submitLoading">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </nuxt-layout>
</template>

<script setup lang="ts">
import {Site} from "~/entity/site";
import {definePageMeta} from "#imports";

const {setting} = useStoreToRefs(useStores.setting());
const {siteApi} = useApi();
const pushFormRef = ref();
const pushForm = reactive<Site>({
  classifyId: "",
  siteName: "",
  siteUrl: "",
  siteIcon: "",
  siteDetails: "",
  tagList: []
});
const pushFormRules = {
  classifyId: [
    {required: true, message: "请选择分类", trigger: "change"}
  ],
  siteName: [
    {required: true, message: "请输入网站标题", trigger: "blur"}
  ],
  siteUrl: [
    {required: true, message: "请输入网站地址", trigger: "blur"}
  ],
  siteDetails: [
    {required: true, message: "请输入网站详情", trigger: "blur"}
  ],
  tagList: [
    {required: true, message: "请选择标签", trigger: "change"}
  ]
};
const {classifyData} = useStoreToRefs(useStores.classify());
const submitLoading = ref(false);
const selectTagRef = ref();
const uploadRef = ref();

definePageMeta({
  middleware: "02-auth",
});

useHead({
  title: "网站提交" + setting.value?.seoSeparate + setting.value?.name,
  meta: [
    {name: 'description', content: setting.value?.seoDescription},
    {name: 'keywords', content: setting.value?.seoKeywords.join(",") + ",网站提交"}
  ]
});

const selectChange = (arr: any) => {
  pushForm.tagList = arr;
};
const onSubmit = () => {
  pushFormRef.value.validate((valid: boolean) => {
    if (valid) {
      submitLoading.value = true;
      siteApi.push(pushForm).then((res: any) => {
        if (res.code === 200) {
          pushFormRef.value.resetFields();
          pushForm.classifyId = "";
          pushForm.tagList = [];
          pushForm.siteIcon = "";
          pushForm.siteName = "";
          pushForm.siteUrl = "";
          pushForm.siteDetails = "";
          selectTagRef.value.cleanSelect();
          uploadRef.value.cleanFileList();
          ElMessage.success("提交成功，等待管理员审核");
        } else {
          ElMessage.error(res.message);
        }
        submitLoading.value = false;
      });
    } else {
      return false;
    }
  });
};
const uploadSuccess = (file: any) => {
  pushForm.siteIcon = file.url;
};
</script>

<style scoped lang="scss">

</style>